<template>
  <div>
    <!-- main start -->
    <div class="navList">
      <div class="w">
        <div class="logo">
        </div>
        <ul>
          <li ><router-link to="/baseServiceOrderSearch">会员订单查询</router-link></li>
          <li><router-link to="/baseServiceOrderAdd">新增会员购买记录</router-link></li>
          <li class="active" ><router-link to="/baseServiceOrderStatistics">财务统计</router-link></li>
        </ul>
      </div>
    </div>

    <div class="contianer">
      <div class="accountManage">
        <div class="inquiryTerm">
          <div class="w">
            <h1 class="hposition">财务统计<span></span></h1>
            <div class="inquiryCon">
              <div>
                <span>时间：</span>
                <input type="text" class="Wdate startTime" :class="element.startTime" value="" onclick="WdatePicker()"/><i>—</i><input type="text" value="" onclick="WdatePicker()"  class="Wdate endTime" :class="element.endTime"/><input type="button" value="查 询" @click="search($event,'timeSearch')"/>
                <label><span class="setToday" @click="search($event,'today')" v-bind:class="spanStyle.span0">今天 </span>｜最近：<span @click="search($event,'span')" v-bind:class="spanStyle.span1">1个月</span><span  @click="search($event,'span')" v-bind:class="spanStyle.span2">3个月</span><span  @click="search($event,'span')" v-bind:class="spanStyle.span3">1年</span></label>
              </div>
            </div>
            <div class="inquiryList">
              <div>
                <span>分类：</span>
                <ul>
                  <li :class="{active:payType==-1}" @click="payType=-1;search('')">全部</li>
                  <li :class="{active:payType==1}" @click="payType=1;search('')">手机端支付</li>
                  <li :class="{active:payType==4}" @click="payType=4;search('')">电视端支付</li>
                  <li :class="{active:payType==3}" @click="payType=3;search('')">电脑端支付</li>
                  <li :class="{active:payType==0}" @click="payType=0;search('')" >广电营业厅支付</li>
                </ul>
                <p class="pageList"><a href="javaScript:void(0)" @click="search($event,'-')" :class="page.pageLeft"></a><label><input type="text" v-model="searchPageSN" @keydown="search($event,'p');" @blur="search($event,'all')">/ {{baseServiceOrderCount}}页</label><a href="javaScript:void(0)" @click="search($event,'+')" :class="page.pageRight"></a></p>
              </div>
              <!-- <div>
                <span>状态：</span>
                <ul>
                  <li :class="{active:trade_status==-1}" @click="trade_status=-1;search('')"  >全部</li>
                  <li :class="{active:trade_status==1}" @click="trade_status=1;search('')" >成功</li>
                  <li :class="{active:trade_status==0}" @click="trade_status=0;search('')"  >未支付</li>
                </ul>
                <p class="pageList"><a href="javaScript:void(0)" @click="search($event,'-')"></a><label><input type="text" v-model="searchPageSN" @keydown="search($event,'p');">/ {{baseServiceOrderCount}}页</label><a href="javaScript:void(0)" @click="search($event,'+')"></a></p>
              </div> -->
            </div>
          </div>
        </div>
        <div class="orderInquiryList">
          <div class="w">
            <table class="listCon">
              <thead>
                <tr>
                  <th>分类</th>
                  <th>手机号</th>
                  <th>姓名</th>
                  <th>创建时间</th>
                  <th>订单号</th>
                  <th>所属学校</th>
                  <th>所属班级</th>
                  <th>购买时长(月)</th>
                  <th>支付状态</th>
                  <th>支付金额(元)</th>
                  <th>服务开始日期</th>
                  <th>服务截止日期</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in baseServiceOrderArray">
                  <td>
                    <img v-if="item.payType==1" src="static/img/app.png" alt="">
                    <img v-else-if="item.payType==0" src="static/img/offLine.png" alt="">
                    <img v-else-if="item.payType==3" src="static/img/webIcon.png" alt="">
                    <img v-else src="static/img/onlineIcon.png" alt="">
                  </td>
                  <td><p>{{item.cloudUserPhoneNumber}}</p></td>
                  <td><p v-bind:title="item.cloudUserName">{{item.cloudUserName}}</p></td>
                  <td>
                    <p>{{item.updateTime}}</p>
                    <!-- <h1>15:56</h1> -->
                  </td>
                  <td><p>{{item.out_trade_no}}</p></td>
                  <td><p v-bind:title="item.schoolName">{{item.schoolName}}</p></td>
                  <td><p v-bind:title="item.className">{{item.className}}</p></td>
                  <td><p>{{item.serviceDuration}}</p></td>
                  <td><p>{{item.trade_status}}</p></td>
                  <td><p>{{item.total_fee}}</p></td>
                  <td><p>{{item.orderStartDay}}</p></td>
                  <td><p>{{item.orderEndDay}}</p></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="accoutTotal">
         <div class="w">
          统计账单结果：成功支付 {{numbaseServiceOrderCount}} 笔，共 {{baseServiceOrderSum}} 元
         </div>
        </div>
      </div>
    </div>
    <!-- main end -->
  </div>
</template>

<script>
import axios from 'axios'
import config from '@/config'

export default {
  name: 'baseServiceOrderSearch',
  data () {
    return {
      // 查询条件
      buyerPhoneNumber: '',
      cloudUserName: '',
      schoolName: '',
      className: '',
      trade_status: -1,
      pageSN: 0,
      pageSize: 10,
      payType: -1,

      // 
      baseServiceOrderArray:[],
      baseServiceOrderCount: 1,
      searchPageSN:1,
      startTime:'',
      endTime:'',
      numbaseServiceOrderCount:0,
      baseServiceOrderSum:0,
      spanStyle:{
        span1:'active',
        span2:'',
        span3:'',
        span0:''
      },
      page:{
        pageLeft:'',
        pageRight:''
      },
      element:{
        startTime:'',
        endTime:''
      }
    }
  },
  methods: {
    search: function (event,str) {
      if(event){
        this.element.startTime="";
        this.element.endTime="";
        if(str=="-"){
          if(this.searchPageSN>1){
            this.searchPageSN--;
            this.pageSN=this.searchPageSN;
          }else{
           return false;
          }
        }
        if(str=="+"){
          if(this.searchPageSN<this.baseServiceOrderCount){
            this.searchPageSN++;
            this.pageSN=this.searchPageSN;
          }else{
           return false;
          }
        }
        if(str=="p"){
          if(event.keyCode==13){
            this.pageSN=this.searchPageSN;
          }else{
            return false;
          }
        }
        if(str=='span'){
          var curTime=new Date();
          this.endTime=this.dataForm(curTime);
          document.querySelector(".endTime").value=this.endTime;
          var that=event.currentTarget;
          var timeStr=that.innerHTML;
          if(timeStr=='1个月'){
            this.spanStyle={span1:'active',span2:'',span3:'',span0:''};
            this.startTime=this.getPreMonth(this.endTime,1);
            document.querySelector(".startTime").value=this.startTime;
          }
          if(timeStr=='3个月'){
            this.spanStyle={span1:'',span2:'active',span3:'',span0:''};
            this.startTime=this.getPreMonth(this.endTime,3);
            document.querySelector(".startTime").value=this.startTime;
          }
          if(timeStr=='1年'){
            this.spanStyle={span1:'',span2:'',span3:'active',span0:''};
            this.startTime=this.getPreMonth(this.endTime,12);
            document.querySelector(".startTime").value=this.startTime;
          }
          this.searchPageSN=1;
          this.pageSN=1;
        }
        if(str=='today'){
          this.spanStyle.span1='';
          this.spanStyle.span2='';
          this.spanStyle.span3='';
          this.spanStyle.span0='active';
          var curTime=new Date();
          this.startTime=this.endTime=this.dataForm(curTime);
          document.querySelector(".endTime").value=this.endTime;
          document.querySelector(".startTime").value=this.startTime;
          this.searchPageSN=1;
          this.pageSN=1;
        }
        if(str=="timeSearch"){
          this.startTime=document.querySelector(".startTime").value;
          this.endTime=document.querySelector(".endTime").value;
          if(!this.startTime && !this.endTime){
            this.tip("起始时间及终止时间不能为空");
            this.spanStyle={span1:'',span2:'',span3:'',span0:''};
            this.element.startTime="error";
            this.element.endTime="error";
            this.baseServiceOrderArray =[];
            this.numbaseServiceOrderCount=0;
            this.baseServiceOrderSum=0;
            this.baseServiceOrderCount = 1;
            this.page.pageRight="";
            return false;
          }else{
            this.element.startTime="";
            this.element.endTime="";
          }
          if(!this.startTime){
            this.tip("请选择起始时间");
            this.element.startTime="error";
            this.spanStyle={span1:'',span2:'',span3:'',span0:''};
            this.baseServiceOrderArray =[];
            this.numbaseServiceOrderCount=0;
            this.baseServiceOrderSum=0;
            this.baseServiceOrderCount = 1;
            this.page.pageRight="";
            return false;
          }else{
            this.element.startTime="";
          }
          if(!this.endTime){
            this.tip("请选择终止时间");
            this.element.endTime="error";
            this.spanStyle={span1:'',span2:'',span3:'',span0:''};
            this.baseServiceOrderArray =[];
            this.numbaseServiceOrderCount=0;
            this.baseServiceOrderSum=0;
            this.baseServiceOrderCount =1;
            this.page.pageRight="";
            return false;
          }else{
            this.element.endTime="";
          }
          //console.log(this.startTime);
          var curTimeN=new Date();
          var inputEnd=this.dataForm(curTimeN);
          var inputStart1=this.getPreMonth(inputEnd,1);
          var inputStart3=this.getPreMonth(inputEnd,3);
          var inputStart12=this.getPreMonth(inputEnd,12);
          if(this.startTime==inputStart1 && this.endTime==inputEnd){
            this.spanStyle={span1:'active',span2:'',span3:'',span0:''};
          }else if(this.startTime==inputStart3 && this.endTime==inputEnd){
            this.spanStyle={span1:'',span2:'active',span3:'',span0:''};
          }else if(this.startTime==inputStart12 && this.endTime==inputEnd){
            this.spanStyle={span1:'',span2:'',span3:'active',span0:''};
          }else if(this.startTime==inputEnd && this.endTime==inputEnd){
            this.spanStyle={span1:'',span2:'',span3:'',span0:'active'};
          }else{
            this.spanStyle={span1:'',span2:'',span3:'',span0:''};
          }
        }
        if(str='all'){
          this.pageSN=this.searchPageSN;
        }
      }else{
        this.searchPageSN=1;
        this.pageSN=1;
        this.startTime=document.querySelector(".startTime").value;
        this.endTime=document.querySelector(".endTime").value;
      }
      this.page.pageRight="";
      // 参数
      // var data = new FormData()
      // data.append('request', 'baseServiceOrderStatistics')
      // data.append('PHPSESSID', localStorage.PHPSESSID)
      // data.append('startTime', this.startTime)
      // data.append('endTime', this.endTime)
      // data.append('trade_status', this.trade_status)
      // data.append('pageSN', this.pageSN)
      // data.append('pageSize', this.pageSize)
      // data.append('payType', this.payType)
      var data = 'request='+'baseServiceOrderStatistics'
        +'&startTime='+this.startTime
        +'&endTime='+this.endTime
        +'&trade_status='+this.trade_status
        +'&pageSN='+this.pageSN
        +'&pageSize='+this.pageSize
        +'&payType='+this.payType
        +'&PHPSESSID='+localStorage.PHPSESSID
      // 异步请求 
      let _this = this;
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceOrderStatistics',data)
        .then(function (response) {
          // console.log(response);
          let data = response.data
          if (data.result==0) {
            _this.baseServiceOrderArray = data.data.baseServiceOrderArray
            _this.numbaseServiceOrderCount=data.data.baseServiceOrderCount;
            _this.baseServiceOrderSum=data.data.baseServiceOrderSum?parseFloat(data.data.baseServiceOrderSum).toFixed(2):0;
            _this.baseServiceOrderCount = Math.ceil(data.data.baseServiceOrderCount/_this.pageSize);
            _this.baseServiceOrderCount=_this.baseServiceOrderCount?_this.baseServiceOrderCount:1;
            if(_this.baseServiceOrderCount>1 && _this.searchPageSN<_this.baseServiceOrderCount ){
              _this.page.pageRight="avail";
            }
          }
          if (data.result==2) {
            localStorage.clear()
            document.cookie = ''
            _this.$router.push({ path: 'login' })
          }
          // localStorage.username = username
          // localStorage.password = password
        })
        .catch(function (error) {
          console.log(error);
          // _this.$router.push('/login')
        });
    },
    dataForm: function (time) {
      var year,month,day;
      year=new Date(time).getFullYear();
      month=new Date(time).getMonth() + 1;
      day=new Date(time).getDate();
      month=month<10?"0"+month:month;
      day=day<10?"0"+day:day;
      return year+"-"+month+"-"+day;
    },
    getPreMonth:function (date,mm) {
      var arr = date.split('-');
      var year = arr[0];
      var month = arr[1]-1;
      var day = arr[2];
      var days = new Date(year, month, 0);
      days = days.getDate();
      var year2 = year;
      var month2 = parseInt(month) - mm;
      if(mm>=12){
        year2 = parseInt(year2) - 1;
        month2=parseInt(month);
      }else if(mm<6 && month2>month){
        year2 = parseInt(year2) - 1;
        month2=parseInt(month)+12-mm;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
          day2 = days2;
      } 
      month2+=1; 
      if (month2 < 10) {
          month2 = '0' + month2;
      }
      return  year2 + '-' + month2 + '-' + day2;
    },
    timeChange: function() {

    },
    tip:function(content){
      var tooltip=document.getElementsByClassName("tooltip");
      if (tooltip.length > 0) {
         return false;
      }
      var pElement = document.createElement("div");
      pElement.className="tooltip fadeIn";
      var messageNode = document.createTextNode(content);
      pElement.appendChild(messageNode);
      document.body.appendChild(pElement);
      setTimeout(function () {
          setTimeout(function () {
              document.body.removeChild(pElement);
          }, 300);
      }, 1000);
    },
  },
  watch:{
    searchPageSN:function(){
      if(this.searchPageSN<=1){
        this.page.pageLeft="";
      }else{
        this.page.pageLeft="avail";
      }
      if(this.searchPageSN>=this.baseServiceOrderCount){
        this.page.pageRight='';
      }else{
        this.page.pageRight="avail";
      }
    }
  },
  mounted:function(){
    this.$nextTick(function(){
      var curTime=new Date();
      this.endTime=this.dataForm(curTime);
      document.querySelector(".endTime").value=this.endTime;
      this.startTime=this.getPreMonth(this.endTime,1);
      document.querySelector(".startTime").value=this.startTime;
      this.search("","");
    })
  }
}
// function timeChange() {

//  console.log("55555555");

// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.accountManage  h1.hposition span{right:73px;}
</style>
